<template>
	<div class="group-detail" v-if="data">
		<header class="commodity-header cxo-red white layout-around fs34rem" v-show="scrollTop > 200">
			<span class="align-center" :class="{ select: view == 1 }" @click="showView(1)">商品</span>
			<span class="align-center" :class="{ select: view == 2 }" @click="showView(2)">详情</span>
		</header>
		<div v-show="view == 1">
			<div class="commodity-banner">
				<div class="title-btn layout pt20rem pb20rem" v-show="scrollTop < 100" v-if="showAndroid !='1'">
					<i class="iconfont icon-zuojiantouyuanxing ml30rem" style="color:#bfbfbf" @click="$router.back('-1')" v-if="showApp!='1'"></i>
					<div v-else></div>
					<div class="mr30rem">
						<!-- <i class="iconfont icon-1016fenxiangyuanxing"></i> -->
						<i class="iconfont icon-gengduo1"  style="color:#bfbfbf"  @click="sheetVisible = true"></i>
					</div>
				</div>
				<section class="">
					<swiper :data="banner" :options="bannerOptions" img-key="pic_cover_big">
					</swiper>
				</section>
			</div>
		 	<section class="pl30rem pr30rem pt25rem pb25rem border-b20 price-box">
		 		<p class="fs32rem c333 bold">{{ data.goods_name }}</p>
		 		<div class="layout-juscon mt35rem">
					<div class="price">
						<p class="fs40rem red" v-if="price">￥{{ price }} <i v-if="data.activity_cate != '4'">预售价</i></p>
						<p class="fs40rem red" v-else>￥{{ data.price }} <i v-if="data.activity_cate != '4'">预售价</i></p>
						<del class="fs26rem c999">原价￥{{ data.market_price }}</del>
					</div>
					<span class="fs26rem c666 flex-end">已有{{ data.yg_num }}人参与预售</span>
		 		</div>
		 	</section>
			<section class="get-coupon pl30rem pr30rem border-b20">
				<div class="rating-title layout border-b">
		 			<h3 class="fs30rem c333">预计发货时间：{{ data.booking_endtime * 1000 ,'MM月dd日' | formatDate }}</h3>
		 		</div>
		 		<p class="fs28rem c666">流程：1.付定金-2.付尾款-3.发货</p>
				<div class=" guarantee layout border-t pt25rem pb25rem">
					<div class="guarantee-son flex-left">
						<i class="iconfont icon-qitianwuliyoutuihuo mr15rem red fs36rem"></i>
						<span class="fs28rem c666">七天无理由退货</span>
					</div>
					<div class="guarantee-son flex-left">
						<i class="iconfont icon-zhengpin mr15rem red fs36rem"></i>
						<span class="fs28rem c666">正品保证</span>
					</div>
				</div>
			</section>
			<section class="partner" v-if="jionListData.list.length > 0">
				<div class="partner-title pl30rem pr30rem layout pt25rem pb25rem border-b" >
		 			<h2 class="fs28rem c333">{{ jionListData.count }}人在寻找伙伴，快去参加</h2>
		 			<div class="prtmer-title-right" @click="offeredMore">
		 				查看更多<i class="iconfont icon-right2"></i>
		 			</div>
		 		</div>
		 		<ul class="pl30rem pr30rem">
					<li class="layout pt25rem pb25rem border-b" v-for="item in jionListData.list ">
						<img class="list-left" :src="img_url + item.user_headimg" alt="">
						<div class="list-mid flex_1 flex-column ml30rem">
							<p class="ellipsis fs32rem">{{ item.nickname }}</p>
							<div class="list-mid-bottom layout-juscon mt10rem">
								<p class="flex-center fs24rem">还差<span class="cxo-red-color">1人</span>拼成
								</p>
							</div>
						</div>
						<div class="list-right flex-column flex-center align-center">
							<button class=" white fs28rem align-center mb10rem cxo-red"  @click="offeredShare(item)" v-if="item.button== '1'">去邀请</button>
							<button class=" white fs28rem align-center mb10rem cxo-red"  @click="offered(item)" v-if="item.button=='0'">去参加</button>
							<p class="fs24rem c66 layout" v-if="item.time > 0">剩余<countdown :data="item.time"></countdown></p>
						</div>
					</li>
				</ul>
			</section>
			<section  class="rating pl30rem pr30rem border-b20" v-if="starData.length > 0">
		 		<router-link tag="div" :to="'/rating/comment?id='+ goods_id" class="rating-title layout border-b">
		 			<h3 class="fs32rem bold c333">体验评星</h3>
		 			<i class="iconfont icon-right2"></i> 
		 		</router-link>
		 		<div class="rating-son pt20rem pb20rem">
					<div class="flex-left pt10rem pb10rem" v-for="item in starData">
						<span class="fs30rem c333 mr10rem">{{ item.name }}:</span>
		 				<i class="iconfont icon-xingxing ml15rem orange" v-if="item.score" v-for = "i in Math.floor(item.score)"></i>
					</div>
		 		</div>
		 	</section>
		 	<router-link tag="section" :to="'/shop/' + data.shop_id" class="describe pl30rem pr30rem border-b20">
				<div class="describe-title flex-left flex-center pt40rem pb40rem">
					<span class="fs32rem c666 mr15rem">{{ data.shop_name }}</span>
					<div class="star mr30rem layout">
						<i class="iconfont icon-xingxing ml15rem orange" v-for = "i in Math.floor(data.shop_credit)"></i>
						<i class="hollow-star ml15rem" v-for = "i in 5 - Math.floor(data.shop_credit)"></i>
					</div>
					<i class="iconfont icon-right2 flex-center"></i>
				</div>
				<div class="pb60rem layout">
					<span class="fs26rem c666">描述相符:{{ data.shop_desccredit }}</span>
					<span class="fs26rem c666">服务态度:{{ data.shop_servicecredit }}</span>
					<span class="fs26rem c666">发货速度:{{ data.shop_deliverycredit }}</span>
				</div>
			</router-link>
			<goods-detail :data="data" v-if="data.rules"></goods-detail>
		</div>
		<div v-show="view == 2" class="pt100rem">
			<header class="commodity-header cxo-red white layout-around fs34rem border-b">
				<span class="align-center" :class="{ select: view == 1 }" @click="showView(1)">商品</span>
				<span class="align-center" :class="{ select: view == 2 }" @click="showView(2)">详情</span>
			</header>
			<goods-detail :data="data" v-if="data.rules"></goods-detail>
		</div>
		<footer class="commodity-footer bg-white layout" v-show="showAndroid !='1'">
			<div class="text-btn layout-juscon pl10rem pr10rem border-t">
				<router-link tag='span' :to="'/shop/'+ data.shop_id" class="fs24rem c666 pl15rem pr15rem">店铺</router-link>
				<span class="fs24rem c666 pl15rem pr15rem" @click="contact">联系卖家</span>
				<span class="fs24rem c666 pl15rem pr15rem" :class="{ onAttention:isAttention }" @click="attention">关注</span>
			</div>
			<div class="commodity-btn layout">
				<button class="cxo-red white" style="opacity:.6" @click="add">
					<span class='white'>￥{{ data.price }}</span>
					<p class='white'>单独购买</p>
				</button>
				<button class="cxo-red white" @click="pay">
					<span class='white'>￥{{ data.ping_price }}</span>
					<p class='white'>发起拼单</p>
				</button>
			</div>
		</footer>
		
		<!-- 选择颜色分类尺寸 -->
		<popup v-model="popupVisible" position="bottom" class="w100">
			<div class="pl30rem pr30rem pb20rem">
				<div class="shop flex-left pt30rem pb30rem border-b">
					<img :src="specificationImg"  alt="">
					<div class="shop-text ml30rem">
						<p class="fs28rem c333 mb20rem bold">{{ data.goods_name }}</p>
						<span class="fs28rem c999"v-if="stock">库存:{{ stock }}</span>	
						<span class="fs28rem c999"v-else>库存:{{ data.stock }}</span>	
						<span class="block fs28rem c999 mb25rem" v-if="selectString <= 1">请选择规格数量</span>
						<span class="block fs28rem c999 mb25rem" v-else>规格：{{ selectString }}</span>
						<strong class="fs30rem red" v-if="price">￥{{ price }}</strong>
						<strong class="fs30rem red" v-else>￥{{ data.price }}</strong>
					</div>
				</div>
				<div class="couponList">
					<div class="specification">
						<div v-for="(item,n) in data.spec_list">
							<h3 class="pt15rem pb15rem fs30rem c333">{{ item.spec_name }}</h3>
							<ul class="flex-left pt15rem pb15rem border-b">
								<li class="fs28rem c333 border circle-8 pt15rem pb15rem pl25rem pr25rem mr15rem" :class="{ on : subIndex[n] == index }" v-for="(items,index) in item.value" @click="selectCate(items,n,index)">{{ items.spec_value_name }}
								</li>
							</ul>
						</div>
					</div>
					<div class="mt30rem mb30rem">
						<h3 class="pt15rem pb15rem fs30rem c333">数量</h3>
						<div class="layout quantity">
							<i class="iconfont icon-jian1" v-if="quantity == 1"></i>
							<i class="iconfont icon-jian1" @click="quantity--" v-else></i>
							<input type="text" v-model="quantity">
							<i class="iconfont icon-jia1" @click="quantity++"></i>
						</div>
					</div>
					<button class="btn w100 align-center block cxo-red fs34rem white circle-8" @click="ascertain()">确定</button>
				</div>
			</div>
		</popup>
		<actionsheet :actions="actions" v-model="sheetVisible"></actionsheet>


		<div class="help-share" v-show="shareShow" @click="shareShow = false">
			<ul class="flex-left pt30rem pb30rem" v-if='showApp'>
				<li @click="share('wechat')">
					<i class="iconfont icon-weixin1 wechat auto"></i>
					<span>微信</span>
				</li>
				<li @click="share('friends')">
					<i class="iconfont icon-pengyouquan circle auto"></i>
					<span>朋友圈</span>
				</li>
				<!-- <li>
					<i class="iconfont icon-qq qq"></i>
					<span>QQ</span>
				</li>
				<li>
					<i class="iconfont icon-weibo weibo"></i>
					<span>微博</span>
				</li> -->
			</ul>
			<img src="../../../assets/share.png" alt="" style="pointer-events: none;" v-else>
		</div>
	</div>
</template>

<script>
	import { getRules } from '@/api/rules';
	import { getYGDetail, getCommentsCount, getGoodsComments, joinList,getWechatConfig, getgroupShare } from '@/api/goods-detail';
	import { addAttention, delAttention, isAttention } from "@/api/shopping-cart";
	import { getStar } from "@/api/rating";
	import Swiper from "@/components/Swiper";
	import GoodsDetail from '@/components/Goods-detail';
	import Countdown from "@/components/Countdown";
	import { formatDate,iosapp } from '@/utils';
	import { Popup,Actionsheet } from 'mint-ui';
	import $toast from '@/utils/toast';

 	export default{
		components:{
			Swiper,
			GoodsDetail,
			Countdown,
			Popup,
			Actionsheet
		},
		mounted()
		{
			window.addEventListener('scroll', this.handleScroll)
		},
		filters: {
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt);
			}
	  	},
		data()
		{
			return{
				groupShow        : false,
				popupVisible     : false,
				data             : null,
				countdownType    : true,
				sheetVisible  	 : false,
				shareShow        : false,
				starData         : null,
				commentsData     : null,
				scrollTop        : '',
				isAttention      : '',
				selectString     : '',
				price            : '',
				stock            : '',
				specificationImg : '',
				sku_id           : '',
				parameterName    : '',
				coupon_id        : '',
				fuid             : '',
				type             : '',
				select_id        : [],
				selectArr_id     : [],
				subIndex         : [],
				selectArr        : [],
				banner           : [],
				jionListData     : [],
				wechatConfig     : [],
				canselect        : [],
				comments_type    : 0,
				quantity         : 1,
				view             : 1,
				img_url          : process.env.IMG_URL,
				actions       	 : [{name:'投诉该商品',method : this.complaint}],
				goods_id         : this.$route.params.id,
				showAndroid      : this.$route.query.isapp,
				is_ping          : this.$route.query.ping,
				uid              : window.localStorage.getItem('uid'),
				showApp          : window.sessionStorage.getItem('isapp'),
				bannerOptions : {
					slidesPerView : 'auto',
					loopedSlides  : 'auto',
					autoplay: {
						delay: 5000,
					},
				}
			}
		},
		created()
		{
    		window.scrollTo(0,0);  
    		this.loadData();
		},
		watch:
		{
			select_id(newVal)
			{
				this.canselect = this.data.sku_list.filter(res => res.attr_value_items.indexOf(newVal)>-1);
				if(this.canselect.length == 1)
				{
					if(this.type=='ping')
						this.price = this.canselect[0].ping_price;
					else
						this.price = this.canselect[0].price;

					this.stock = this.canselect[0].stock;
					this.sku_id = this.canselect[0].sku_id;
				}
				else
				{
					this.price = '';
					this.stock = '';
					this.sku_id = '';
				}
			}
		},
		methods:
		{
			// 页面置顶
			handleScroll () {
			  this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
			},
			loadData()
			{
	    		this.loadDetailData();
				this.loadStar();
	    		this.loadComments();
	    		this.judgeAttention();
	    		this.loadJoinList();
			},
			loadDetailData()
			{
				var params = {
					goods_id : this.goods_id, 
					uid      : this.uid 
				}
				getYGDetail(params).then( res => {
					this.banner = res.data.img_list;
					this.specificationImg = this.img_url + res.data.img_list[0].pic_cover_small;
					this.coupon_id = res.data.coupon_id;
					this.data = res.data;
					if(this.is_ping) 
						this.price = this.data.ping_price;
				})
			},
			loadStar()
			{
				getStar(this.goods_id , '0').then( res => {
					this.starData = res.data;
				})
			},
			loadComments()
			{
				getCommentsCount(this.goods_id).then( res => {
					this.commentsData = res.data;
				})
			},
			loadJoinList()
			{
				var params = {
					uid        : this.uid,
					goods_id   : this.goods_id,
					page_index : 1,
					page_size  : 2,
				}
				joinList(params).then( res => {
					this.jionListData = res.data;
				})
			},

			judgeAttention()
			{
				if(!this.uid)
					return;
				
				var params = {
					fav_id   : this.goods_id,
					fav_type : 'goods',
					uid      : this.uid
				}
				isAttention(params).then( res => {
					if(res.data == 1){
						this.isAttention = true;
					}
					if(res.data == 0){
						this.isAttention = false;
					}
				})
			},
			attention()
			{
				var params = {
					fav_id : this.goods_id,
					fav_type: 'goods',
					uid : window.localStorage.getItem('uid')
				}
				if(this.isAttention){
					delAttention(params).then( res => {
						this.isAttention = false;
					})
				}
				else
				{
					addAttention(params).then( res => {
						this.isAttention = true;
					})
				}
			},
			// 规格选中
			selectCate(item,n,index)
			{ 
				if (this.selectArr[n] != item.spec_value_name) 
				{
	                this.selectArr_id[n] = item.spec_id + ':' + item.spec_value_id;
	                this.selectArr[n] = item.spec_value_name;
	                this.subIndex[n] = index;
	            }
	            else
	            {
	                this.selectArr[n] = "";
	                this.subIndex[n] = -1; //去掉选中的颜色 
            	}
				this.$forceUpdate();
				this.select_id = this.selectArr_id.join(';')
				this.selectString = this.selectArr.join(' '); 
				if(item.spec_img)
					this.specificationImg = this.img_url + item.spec_img;
			},
			//判断规格，库存。
			ascertain()
			{
				if(this.data.spec_list.length > 0 && this.data.stock > 0 )
				{
					console.log(this.canselect)
					if(this.canselect.length != 1)
						return $toast('请选择规格数量');

					if(this.parameterName == 'add')
						return this.add();

					if(this.parameterName == 'pay')
						return this.pay();

					return this.popupVisible = false;
				}
				else
				{
					if(this.data.stock > 0){
						this.sku_id = this.data.sku_list[0].sku_id;
					}
					else
					{
						this.popupVisible = false;
						return $toast('库存不足');
					}

					if(this.parameterName == 'add')
						return this.add();

					if(this.parameterName == 'pay')
						return this.pay();

					if(this.parameterName == 'offered')
						return this.offered();

					return this.popupVisible = false;
				}
			},
			// 单独购买
			add()
			{
				this.parameterName = 'add';
				this.price = this.data.price;

				if(!this.sku_id)
					return this.popupVisible = true;

				if(!this.sku_id)
				{
					return this.popupVisible = true;
				}
				else
				{
					var skuList = this.sku_id+':'+this.quantity
					this.$store.dispatch("skuidList", skuList);
					this.$router.push('/shopping/group-pay?type=0')
				}
			},
			//发起拼单
			pay()
			{
				this.parameterName = 'pay';
				this.price = this.data.ping_price;
				this.type = 'ping';
				if(!this.sku_id)
				{
					return this.popupVisible = true;
				}
				else
				{
					var skuList = this.sku_id+':'+this.quantity
					this.$store.dispatch("skuidList", skuList);
					this.$router.push('/shopping/group-pay?type=0&is_tan=1&ping=1')
				}
			},
			offeredMore()
			{
				this.$store.dispatch('commodity',this.data)
				this.$router.push('/ordering/detail/more-group?goods_id='+ this.goods_id)
			},
			offeredShare(item)
			{
				let url = location.href.split('#')[0] //获取锚点之前的链接
				getWechatConfig(url).then(response => {
			        let res = response.data;
			        this.groupShare(res);
			        this.shareShow = true;
		        });
			},
			offered(item)
			{

				if(!this.uid)
					location.href = 'https://fish.qidongwx.com/service/Thirdlogin/wchatPublicLogin?fuid=' + item.uid +'&goods_id='+ this.goods_id +'&type=4';
				else{
					if(item)
					{
						this.fuid = item.uid;
						this.parameterName = 'offered';
					}
					if(!this.sku_id)
					{
						this.price = this.data.ping_price;
						return this.popupVisible = true;
					}
					else
					{
						var skuList = this.sku_id+':'+this.quantity;
						this.$store.dispatch("skuidList", skuList);
						this.$router.replace('/shopping/group-pay?fuid=' + this.fuid +'&ping=1&type=0')
					}
				}
			},
			showView(num)
			{
				this.view = num;
			},
			loadInitData(num)
			{
				this.comments_type = num;
				this.page_index = 1;
				this.loadData();
			},
			complaint()
			{
				this.$router.push('/complaint?goods_id=' + this.goods_id);
			},
			contact()
			{
				if(!this.uid){
					this.showapp && iosapp('ExperienceLoginAction');
					this.$router.replace('/login?redirect=' + $router.currentRoute.fullPath);
				}
				else if(this.showApp)
				{
					let params = {
						username : this.data.jiguang_username
					}
					iosapp('getJim',params)
				}
				else
					this.$router.push('/jim?nickname='+ this.data.jiguang_username)
			},
			groupShare(resData)
			{
				wx.config({
				    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				    appId: resData.appId, // 必填，公众号的唯一标识
				    timestamp: resData.timestamp, // 必填，生成签名的时间戳
				    nonceStr: resData.nonceStr, // 必填，生成签名的随机串
				    signature: resData.signature,// 必填，签名
				    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
				});
				let paramsLike = {
					type     : '1',
					goods_id : this.goods_id,
					uid      : this.uid
				}
				getgroupShare(paramsLike).then(res =>{
					let url = location.href.split('#')[0];
					let links = res.data.url;
			        let title = res.data.title;
			        let desc = res.data.content;
			        let imgUrl = res.data.img;
					wx.ready(()=>{
						wx.onMenuShareTimeline({
				            title: title, // 分享标题
				            desc: desc, // 分享描述
				            link: links, // 分享链接
				            imgUrl: imgUrl, // 分享图标
				            success: function() {
				              	alert("分享到朋友圈成功")
				            },
				            cancel: function() {
				              	alert("分享失败,您取消了分享!")
				            }
				          });
				          //微信分享菜单测试
				          wx.onMenuShareAppMessage({
				            title: title, // 分享标题
				            desc: desc, // 分享描述
				            link: links, // 分享链接
				            imgUrl: imgUrl, // 分享图标
				            success: function() {

							},
							cancel: function() {
								
							}
						});
					})
				});
			},
		}
	}
</script>

<style lang="less">
	.group-detail{
		.help-share
		{
			z-index: 99;
			position: fixed;
			bottom: 0;
			left: 0;
			background: rgba(0,0,0,.8);
			width: 100%;
			height: 100%;
			img
			{
				width: 100%;
				display: block;
			}
			ul
			{
				position:fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				background: #fff;
				li
				{
					text-align: center;
					i
					{
						width: 100/28rem;
						height: 100/28rem;
						border-radius: 50%;
						line-height: 100/28rem;
						text-align: center;
						color: #fff;
						display: block;
						font-size: 60/28rem;
					}
					.weibo
					{
						background: #fe555f;
					}
					.wechat
					{
						background: #21cc51;
					}
					.qq
					{
						background: #65aef3
					}
					.circle
					{
						background: #9b8cc6;
					}
					span
					{
						font-size: 28/28rem;
						display: block;
						margin-top: 20/28rem;
					}
				}
			}
		}
		.partner
		{
			border-bottom: 20/28rem solid #f5f5f5;
			ul
			{
				li
				{
					&:last-child
					{
						border-bottom:initial;
					}
					img
					{
						width: 100/28rem;
						height: 100/28rem;
						border-radius: 50%;
						object-fit: cover;
					}
					.list-right
					{
						button
						{
							width: 200/28rem;
							padding-top: 10/28rem;
							padding-bottom: 10/28rem;
							border-radius: 8px;
						}
					}
				}
			}
		}
		.price-box{
			.price{
				p{
					i{
						color: #ff0036;
					    font-size: 1rem;
					    background: #ffdee5;
					    vertical-align: super;
					    display: inline-block;
					    padding-left: 5px;
					    padding-right: 5px;
					    border-radius: 2px;
					}
				}
			}
		}
		.swiper-container{
			.swiper-wrapper{
				height: 700/28rem;
				img{
					width: 100%;
					height: 100%;
					display: block;
					object-fit:cover;
				}
			}
		}
		.commodity-header{
			height: 90/28rem;
			line-height: 90/28rem;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 19;
			span{
				width: 33.333%;
			}
			.select{
				position: relative;
			}
			.select:before{
				content:'';
				display: block;
				width: 40%;
				height: 3/28rem;
				background-color: white;
				position: absolute;
				left: 50%;
				bottom: 10%;
				transform: translate(-50%,50%);
			}
		}
		.title-btn{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 9;
			i{
				font-size: 60/28rem;
			}
		}
		.banner{
			position:relative;
			.swiper-pagination-bullets{
				bottom:100/28rem !important;
			}
			.count-time{
				position: absolute;
				bottom: 0;
				left:0;
				width: 100%;
				z-index: 99;
				display: block;
				text-align:center;
			}
			.count-down-two{
				height: 80/28rem;
				line-height: 80/28rem;
				background: rgba(255,0,0,.8);
				color: #fff;
				font-size: 34/28rem;
			}
		}

		.rating-title{
			height: 90/28rem;
			line-height: 90/28rem;
		}
		.get-coupon{
			p{
				height: 90/28rem;
				line-height: 90/28rem;
			}
		}
		.coupon{
			h2{
				height: 110/28rem;
				line-height: 110/28rem;
			}
			ul{
				li{
					.get-btn{
						height: 60/28rem;
						line-height: 60/28rem;
						width: 140/28rem;
					}
				}
			}
		}
		.comment{
			button{
				border-color: #a3a3a3;
				width: 30%;
				height: 60/28rem;
				line-height: 60/28rem;
			}
			.is-on{
				border: 1px solid transparent;
				background-color: #ff0036;
				color: #fff;
			}
		}
		.mint-popup{
			.shop{
				img{
					width: 160/28rem;
					height: 160/28rem;
					object-fit: cover;
				}
			}
			.specification{
				overflow-y: scroll;
				ul{
					li{
						border-color:#666;
					}
					.on{
						border: 1px solid transparent;
						background-color: #ff0036;
						color: #fff;
					}
				}
			}
			.quantity{
				width: 200/28rem;
			}
			.btn{
				height: 90/28rem;
				line-height: 90/28rem;
			}
		}
		.goods-detail{
			// height: 90/28rem;
			// line-height: 90/28rem;
			.select-color{
				font-weight: 600;
				color: #333;
				position: relative;
			}
			.select-color:after{
				content: "";
				display: block;
				background-color: #ff0036;
				height: 6/28rem;
				width: 100%;
				position: absolute;
				bottom: -0;
				left: 0;
			}
		}
		.comment-rating{
			.title{
				height: 90/28rem;
				line-height: 90/28rem;
			}
			.rating-title{
				ul{
					li{
						height: 90/28rem;
						line-height: 90/28rem;
					}
				}
			}
			.rating{
				line-height: 90/28rem;
			}
			.comment{
				button{
					border-color: #a3a3a3;
					width: 30%;
					height: 60/28rem;
					line-height: 60/28rem;
				}
				.on{
					border: 1px solid transparent;
					background-color: #ff0036;
					color: #fff;
				}
			}
			.rating-content{ 
				h3{
					height: 90/28rem;
					line-height: 90/28rem;
				}
				.user-img{
					width: 88/28rem;
					height: 88/28rem;
					object-fit: cover;
					border-radius: 50%;
				}
				.rating-title{
					.title-left{
						span{
							width: 124/28rem;
							height: 33/28rem;
							display: block;
						}
						.primary{
							background: url(../../../assets/icon8.png)no-repeat center /100% 100%;
						}
						.intermediate{
							background: url(../../../assets/icon10.png)no-repeat center /100% 100%;
						}
						.advanced{
							background: url(../../../assets/icon9.png)no-repeat center /100% 100%;
						}
					}
				}
				.img-list{
					ul{
						display: grid;
						grid-template-columns: 1fr 1fr 1fr;
						grid-gap: 0.5rem;
						li{
							img{
								width: 186/28rem;
								height: 186/28rem;
								object-fit: cover;
							}
						}
					}
				}
				.comment-btn{
					border: 2px solid #666;
					display: block;
					margin:0 auto;
					margin-top: 40/28rem;
				}
			}
		}
		.commodity-footer{
			height:100/28rem;
			line-height: 100/28rem; 
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			//z-index:999999;
			.text-btn{
				width: 46%;
				height: 100%;
				span{
					padding-top: 30/28rem;
					background-position: center 25%;
			        background-size: 44/28rem;
			        background-repeat: no-repeat;
			        &:nth-child(1){
					background-image: url(../../../assets/icon1.png)
					}
					&:nth-child(2){
						background-image: url(../../../assets/icon2.png)
					}
					&:nth-child(3){
						background-image: url(../../../assets/icon3.png)
					}
				}
				.onAttention{
					&:nth-child(3){
						background-image: url(../../../assets/details_star_img.png)
					}
				}
				
			}
			.commodity-btn{
				width: 52%;
				height: 100%;
				button{
					height: 100%;
					width: 50%;
				}
			}
		}
		.mint-popup{
			width: 100%;
			h2{
				position: relative;
				i{
					position: absolute;
					right: 10%;
					top: 50%;
					transform: translate(50%,-50%);
				}
			}
			.popup-button{
				height: 100/28rem;
				line-height: 100/28rem;
				span{
					border-right-color: #d7d7d7;
				}
			}
		}
		.couponList{
			max-height: 450/28rem;
			overflow-y: scroll; 
		}
		.mint-toast{
			z-index: 9999;
		}
		
	}
</style>